<!-- 首页 -->
<template>
	<view class="">
		
		<cs v-if='ver'></cs>
		<view class="page_box" v-else>
			<!-- 空白页 -->
			<shopro-empty v-if="noNetwork" :emptyData="noNetworkData" @click="onEmptyBtn"></shopro-empty>
			<shopro-empty v-else-if="!hasTemplate" :emptyData="emptyData"></shopro-empty>
			<view v-else class="page_box shopro-selector">
				<!-- 导航栏 -->
				<view class="head_box active" :style="{ background: bgcolor }">
					<cu-custom :isBack="true" :showBackIcon="false" v-if="info && info.name">
						<block slot="backText">
							<!-- {{ info.name || '商城' }} -->
							<!-- <text class="nav-title shopro-selector-rect">华茗汇艺术商城</text> -->
							<view class="padding-tb-xs">
								<image src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/asdfasd.png" mode="aspectFill" style="width: 308rpx; height: 50rpx;"></image>
							</view>
						</block>
					</cu-custom>
				</view>
				<!-- 搜索框 -->
				<!-- <u-search :show-action="true" action-text="搜索" style="width: 80%; margin: 10rpx; " v-model="searchVal" :animation="false" @search="uSearch"></u-search> -->
				<view class="content_box" style="margin-top: -4rpx;overflow: hidden;">
					<scroll-view class="scroll-box" scroll-y scroll-with-animation enable-back-to-top >
						<block v-if="template" v-for="(item, index) in template" :key="index">
							<!-- 搜索 -->
							<sh-search v-if="item.type === 'search'"  :detail="item" :bgcolor="bgcolor" ></sh-search>
							<!-- 轮播 -->
							<sh-banner v-if="item.type === 'banner'" :detail="item.content" @getbgcolor="getbgcolor">
							</sh-banner>
							<!-- 菜单 -->
							<sh-menu v-if="item.type === 'menu'" :detail="item.content" @show1="showModel" :is_auth='is_auth' :menu="item.content.style"
								:imgW="94"></sh-menu>
							<!-- 推荐商品 -->
							<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'"
								:detail="item.content"></sh-hot-goods>
							<!-- 广告魔方 -->
							<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
		
							<block v-if="item.type === 'banner'">
		
								<view class="padding1">
									<view class="" style="font-size: 20rpx;">
										近期访客:
										<view class="cu-avatar-group">
											<view class="cu-avatar round lg bgc" v-for="(item,index) in userList"
												:key="index" :style="[{ backgroundImage:'url(' + item.avatar + ')'}]">
											</view>
										</view>
									</view>
		
									<view class="" style="float: right; font-size: 20rpx;">
										近期访问人数： {{user_count * 10}}
									</view>
								</view>
		
							</block>
							<!-- 优惠券 -->
							<!-- <sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon> -->
							<!-- 秒杀 -->
							<sh-seckill v-if="item.type === 'banner'" :detail="item.content"></sh-seckill>
							<!-- 拼团 -->
							<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
							<!-- 富文本 -->
							<sh-richtext v-if="item.type === 'rich-text'" :detail="item.content"></sh-richtext>
		
							<block v-if="item.type === 'menu'">
								<view class="sh-user-menu-box mb10 header">
									<view class="header-unm">
										<view class="" style="font-size: 24rpx; ">
											<image
												style="width: 67rpx; height: 72rpx;"
												src="../../static/xwtt.png" mode=""></image>
										</view>
										<swiper style="height: 100rpx; width: 100%;padding-left: 50rpx;" :disable-touch="true" :circular="true" :autoplay="true" :interval="1500"  :duration="7500">
											<swiper-item class="flex justify-center align-center" style="height: 100%; width: 500rpx;" v-for="(item,index) in article">
													{{item}}
											</swiper-item>
										</swiper>
					<!-- <u-notice-bar :autoplay="true" color="#000" :volume-icon="false" bg-color="#fff" mode="horizontal" :list="article"></u-notice-bar> -->
									</view>
									
									
									
									
									
									
									
									
									
						
						<view class="" style="background-color: #f6f6f6; width: 100%; height: 10rpx;">
						</view>
						<view class="header-unm1 padding">
							<view class="padding-tb-sm  text-black text-bold" style="font-size: 30rpx; ">
								成交记录
							</view>
							<view class="" style="border-bottom: 1rpx solid #eee;">
							</view>
							<view class="flex justify-between align-center"
								style="font-size: 24rpx; ">
								<view class="">
								</view>
								<view class="">
								</view>
							</view>
							
							<view class="">
								<view class="home">
									<view class="list uni-flex uni-column">
											<view class="wrap-item">
											<!-- <view class="lis uni-flex uni-column" :animation="animationData" > -->
											<view class="lis uni-flex uni-column" style="height: 120rpx;">
											<!-- 	<view class="uni-flex uni-column" v-for="(item, index) in orderList" :key="index">
													<view class="swiper-item item_title uni-flex list_item">
														<view class="userlistmsg">
															<view class="">{{ item.nickname }}</view>
															<view class="">{{ item.goods_title }}</view>
															<view class="">{{ item.createtime }}</view>
														</view>
													</view>
												</view> -->
												<swiper :vertical="true" :display-multiple-items="4" :circular="true" :autoplay="true" :interval="600" :duration="10000">
													<swiper-item class="uni-flex  userlistmsg" v-for="(item, index) in orderList" :key="index" style="height: 50%;">
														<view class="">{{ item.nickname }}</view>
														<view class="">{{ item.goods_title }}</view>
														<view class="">{{ item.createtime }}</view>
													</swiper-item>
												</swiper>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</block>
		
		
		
							<!-- 功能列表 -->
							<!-- <sh-nav v-if="item.type === 'nav-list'" :detail="item.content"></sh-nav> -->
							<!-- 九宫格列表 -->
							<sh-grid v-if="item.type === 'grid-list'" :detail="item.content"></sh-grid>
							<!-- 功能标题 -->
							<sh-title-card v-if="item.type === 'title-block'" :detail="item.content"></sh-title-card>
							<!-- 个人信息 -->
							<sh-userinfo v-if="item.type === 'user'" :detail="item.content"></sh-userinfo>
							<!-- 钱包 -->
							<sh-wallet v-if="item.type === 'wallet-card'" :detail="item.content"></sh-wallet>
							<!-- 订单卡片 -->
							<sh-order v-if="item.type === 'order-card'" :detail="item.content"></sh-order>
							<!-- 直播 -->
							<!-- #ifdef MP-WEIXIN -->
							<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
							<!-- #endif -->
						</block>
		
		
		
		
						<view class="vip">
							<view class="space-between" @tap="ggg">
								<view class="">
									<image style="width: 177rpx; height: 28rpx;" src="../../static/vip.png" mode="">
									</image>
								</view>
								<view class="f11" style="font-size: 26rpx; color: #999999;">
									查看更多
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<view :key="index" class="flex align-center" style="margin-top: 20rpx;"
								v-for="(item, index) in listFrom"
								@tap="dddd(item)">
								<view class="radius img-box">
									<image :src="item.image" class="radius" style="width: 260rpx; height: 260rpx;" mode="aspectFill"></image>
									<image v-if="item.stock == 0" src="../../static/noOpacity.png" class="img1">
									</image>
								</view>
								<view class="" style="margin-left: 20rpx; line-height: 60rpx;">
									<view class="" style="font-size: 28rpx; width: 60vw;">
										<text class="text-df text-black text-cut block" style=" width: 100%;">{{item.title}}</text>
									</view>
									<view class="" style="color: #717171; font-size: 26rpx;">
										<text class="text-df text-gray">类型 ：{{item.category_name}}</text>
									</view>
									<view class="" style=" font-size: 22rpx;"
										v-for="(item1, id) in item.sku_price" :key="item1.id">
										<text class="text-df">价格：<text class="text-red text-price">{{item.sku_price[0].price}}</text></text>
									</view>
									<view class="cu-tag bg-cyan round">
										
										<text class="text-df">库存：{{item.stock == 0 ? '已售完' :item.stock  }}</text>
									</view>
								</view>
							</view>
						</view>
							
							<shopro-modal v-model="showModal" style="z-index: 88;">
								<block slot="modalContent">
									<view class="modal-box">
										<view class="modal-head">
											<image class="modal-head-img"  :src="$IMG_URL + '/imgs/modal_bg.png'" mode=""></image>
											<text class="modal-head-title">申请VIP</text>
										</view>
										<input class="inp" type="text"  v-model="inputName" placeholder="请输入姓名" placeholder-class="pl-inp" />
										<input class="inp" type="number"  v-model="phoneUser" placeholder="请输入手机号" placeholder-class="pl-inp" />
										<view class="post-btn flex justify-between align-center">
											<view class="bgc1" @tap="addUser">
												申请
											</view>
											<view class="bgc2" @tap="showModal = false">
												取消
											</view>
										</view>
										<view class="" style="height: 100rpx; line-height: 100rpx;" @tap="phonenifo">
											VIP认证需致电客服<text style="color: #f00; margin-left: 10rpx;" >400-686-7990</text>
										</view>
									</view>
								</block>
							</shopro-modal>
		
						
					</scroll-view>
				</view>
				<!-- <view class="foot_box"></view> -->
				<!-- 登录提示 -->
				<shopro-login-modal></shopro-login-modal>
				<!-- 自定义底部导航 -->
				<shopro-tabbar></shopro-tabbar>
				<!-- 关注弹窗 -->
				<!-- <shopro-float-btn></shopro-float-btn> -->
				<!-- 连续弹窗提醒 -->
				<!-- <shopro-notice-modal v-if="!showPrivacy && showNoticeModal"></shopro-notice-modal> -->
				<!-- 隐私协议 -->
				<!-- #ifdef APP-PLUS -->
				<view class="modal-wrap">
					<shopro-modal v-model="showPrivacy">
						<block slot="modalContent">
							<view class="service-contract-wrap">
								<image class="service-head-img" :src="$IMG_URL + '/imgs/modal/servece_head.png'"
									mode="widthFix"></image>
								<view class="service-title">用户隐私协议概况</view>
								<view class="service-content ">
									感谢您使用Shopro商城，我们非常重视您的个人信息和隐私保护，在您使用服务前，请仔细阅读
									<text style="color: #EAB866;"
										@tap="jump('/pages/public/richtext', { id: 2 })">《Shopro商城隐私协议》</text>
									，我们将会严格按照经您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
								</view>
								<view class="service-tip ">如您同意此条款，请点击“同意”并开始使用我们的产品和服务，我们将尽全力保护您的个人信息安全。</view>
								<view class="btn-box x-c"><button class="cu-btn agree-btn" @tap="Agree">知道了</button></view>
							</view>
						</block>
					</shopro-modal>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>


<script>
	import shSearch from './components/sh-search.vue';
	import shBanner from './components/sh-banner.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shMenu from './components/sh-menu.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shNav from './components/sh-nav.vue';
	import shUserinfo from './components/sh-userinfo.vue';
	import shGrid from './components/sh-grid.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shOrder from './components/sh-order.vue';
	import shWallet from './components/sh-wallet.vue';
	import cs from '../../components/cs/cs.vue';

	import Msgbar from '@/components/silencc-msgbar/index'

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';

	// #ifdef H5
	import html2canvas from '@/common/utils/sdk/html2canvas.js';
	let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
	let handle = function(e) {
		e.preventDefault();
	};
	// #endif

	export default {
		components: {
			cs,
			shSearch,
			shBanner,
			shUserinfo,
			shHotGoods,
			shTitleCard,
			shOrder,
			shWallet,
			shMenu,
			shAdv,
			shGrid,
			shCoupon,
			shSeckill,
			shGroupon,
			shRichtext,
			shNav,
			Msgbar,
			// #ifdef MP-WEIXIN
			shLive,
			// #endif
		},
		data() {
			return {
				ver:false,
				showModal: false,
				bgcolor: '',
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				mode: '',
				showPrivacy: false,
				showNoticeModal: true,
				triggered: false, //下拉刷新
				_freshing: false, //下拉刷新状态
				emptyData: {
					img: this.$IMG_URL + '/imgs/empty/template_empty.png',
					tip: '暂未找到模板，赶快去装修吧~'
				},
				noNetworkData: {
					img: '/static/imgs/empty/empty_network.png',
					tip: '网络连接断开,请刷新重试~',
					pathText: '刷新重试',
					type: 'netWork'
				},
				netEmptyData: {},
				show1: false,
				pathRoter: '',
				parmas: '',
				phoneUser: '',
				inputName: '',
				is_auth: '',
				listFrom: [],
				page: 1,
				user_count: '',
				userList: '',
				article: [],
				orderList: [],
				scrollHeight: 100, //向上滚动距离
				height: 60, //.lis高度（滚动框高度）
				animationData: {}, //动画对象
				list: [],
				token: '',
				searchVal:''
				// animateUp: false,
				// listData: [{
				// 		img: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1613029778,1507777131&fm=26&gp=0.jpg",
				// 		name: "少时诵诗书所所所所所",
				// 	},
				// 	{
				// 		img: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1613029778,1507777131&fm=26&gp=0.jpg",
				// 		name: "哒哒哒哒哒哒多多多多多多",
				// 	},
				// ],
				// timer: null,
			};
		},
		
		// create(){
			
		// },
		computed: {
			...mapState({
				initData: state => state.init.initData,
				template: state => state.init.templateData?.home,
				hasTemplate: state => state.init.hasTemplate,
				noNetwork: state => state.init.noNetwork,
				cartNum: state => state.cart.cartNum,
				forceOauth: state => state.user.forceOauth,
				userInfo: state => state.user.userInfo,
			}),
			popupIndex() {
				if (this.initData.popup) {
					return this.initData.popup.content.index;
				}
			},
			info() {
				if (this.initData.info) {
					// #ifndef MP-WEIXIN
					if (this.initData.info && this.initData.info.name) {
						uni.setNavigationBarTitle({
							title: this.initData.info.name
						});
					}
					// #endif
					return this.initData.info;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onLoad(options) {
			let that = this;
			// #ifdef APP-VUE
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// 监听设备网络状态变化事件，接口ios市场首次安装网络切换问题
			plus.globalEvent.addEventListener('netchange', function() {
				var nt = plus.networkinfo.getCurrentType(); //网络状态
				if (nt !== plus.networkinfo.CONNECTION_UNKNOW && nt !== plus.networkinfo.CONNECTION_NONE) {
					that.init();
					// that.init1();
				}
			});
			// #endif
			this.getUser()
			this.getListFrom()
			this.getGoodsList()
			this.token = uni.getStorageSync('token')
			

			// if (userInfo.is_auth == 0) {
			// 	this.show == true
			// }
		},
		created(){
			this.getup()
		},
		mounted() {
			// #ifdef H5
			if (uni.getStorageSync('screenShot')) {
				this.screenShotPreviewImage();
			}
			// #endif
			this.prizeScroll();
			this.timer = setInterval(this.scrollAnimate, 1500);
		},
	
		onShow(){
			this.getinfo()
			// this.move()
		},
		destroyed() {
			clearInterval(this.timer);
		},
		methods: {

			// 搜索
			uSearch(val){
				console.log(this.searchVal)
			},
			...mapMutations(['CART_NUM']),
			...mapActions(['getAppInit', 'getTemplate']),
			getinfo (){
				this.$api('user.info').then(res => {
					uni.setStorageSync('userInfo', res.data);
					this.is_auth = res.data.is_auth
					}).catch(e => {
					
				})
			},
			
			showModel(bloe) {
				this.showModal = bloe
			},
			
			// getup
			getup(){
				this.$api('template').then(res => {
					this.ver = false
					}).catch(e => {
					this.ver = true
				})
			},
			
			phonenifo() {
				uni.makePhoneCall({
				    phoneNumber: '4006867990' //仅为示例
				});
			},
			
			ggg(){
				//jump1('/pages/goods/listInfo')
				var that = this
				//let userInfo = uni.getStorageSync('userInfo').is_auth
					if (that.is_auth == 1) {
						this.jump1('pages/goods/listInfo', )
					}else {
						if (this.userInfo.nickname == undefined) {
							that.showModal = true
						}
						// uni.showModal({
						// 	title:'提示',
						// 	content: '暂无资格访问, 请升级VIP' ,
						// 	success: function (res) {
						// 		if (res.confirm) {
						// 		} else if (res.cancel) {
						// 		}
						// 	}
						// });
					}		
			},
			dddd(item){
				var that = this
				//let userInfo = uni.getStorageSync('userInfo').is_auth
				if (that.is_auth == 1) {
					this.jump1('/pages/goods/listInfo', { id: item.id })
				}else {
					that.showModal = true
					// uni.showModal({
					// 	title:'提示',
					// 	content: '暂无资格访问, 请升级VIP' ,
					// 	success: function (res) {
					// 		if (res.confirm) {
								
					// 		} else if (res.cancel) {
								
					// 		}
					// 	}
					// });
				}
				
			},
			// 初始化
			init() {
				return Promise.all([this.getAppInit(), this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
				});
			},


			scrollAnimate() {
				this.animateUp = true;
				setTimeout(() => {
					// const item = this.listData.shift();
					// this.listData.push(item);
					this.animateUp = false;
				}, 500);
			},




			getUser() {
				this.$api('user.userInfo').then((res => {
					this.is_auth = res.data.is_auth
				}))
			},



			getHeight(Class) {
				let query = uni.createSelectorQuery().in(this);
				query
					.selectAll(Class)
					.boundingClientRect(data => {
						// this.height = data[0].height;
					})
					.exec();
			},
			prizeScroll() {
				let speed = 60;
				let animation = uni.createAnimation({
					duration: this.getHeight('.lis') / speed,
					timingFunction: 'linear',
					delay: 0
				});
				
				
				
				this.animation = animation;
				
				
				setInterval(() => {
					if (this.scrollHeight >= this.height) {
						animation.translateY(0).step();
						this.scrollHeight = 0;
						this.animationData = animation.export();
					} else {
						this.scrollHeight = this.scrollHeight + 1;
						animation.translateY(-this.scrollHeight).step();
						this.animationData = animation.export();
						
					}
				}, speed);
			},


			// // 添加名单
			// getNames() {
			//   this.$refs.msgbar.this.orderList,
			//   this.$refs.msgbar.start()
			// },

			getListFrom() {
				this.$api('goods.lists', {
					per_page: 3,
					page: this.page,
					model: 'vip',
				}).then((res => {
					this.listFrom = res.data.data
					this.listFrom.forEach(item=>{
						if(item.sku_price[0].price >10000){
							item.sku_price[0].price = item.sku_price[0].price/10000 +'万'
						}else{
							item.sku_price[0].price = item.sku_price[0].price 
						}
					})
				}))
				
			},

			getGoodsList() {
				this.$api('goods.listsIndex', {}).then((res => {
					this.userList = res.data.user
					this.orderList = res.data.order
					console.log(res)
					// for(let i =0;i<3;i++){
					// 	res.data.order.push(res.data.order[i])
					// }
					this.orderList.forEach((item,index)=>{
						let str = item.nickname[item.nickname.length-1]
						let len = item.nickname.length-1
						for(let i =1;i<len;i++){
							str = '*'+str
						}
						item.nickname = str
					})
					this.user_count = res.data.user_count
					res.data.article.forEach( (i => {
						this.article.push(i.title)
					}))
			
				})).catch( err=>{
					console.log(err)
				})
			},

			// 点击无网络按钮
			onEmptyBtn() {
				this.init();
			},

			// 获取轮播背景色
			getbgcolor(e) {
				this.bgcolor = e;
			},

			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			jump1(path, parmas) {
				if (this.is_auth == 0) {
					this.pathRoter = path
					this.parmas = parmas
					this.show1 = true
				} else {
					this.$Router.push({
						path: path,
						query: parmas
					});
				}

			},
			
			addUser() {
				var that = this
				that.$api('user.userauth', {
					name: that.inputName,
					phone: that.phoneUser,
				}).then((res => {
					if (res.code == 1) {
						that.showModal = false
						that.$tools.toast(res.msg);
						// this.$Router.push({
						// 	path: this.pathRoter,
						// 	query: this.parmas
						// });
					} 
					if (res.code == 0){
						that.showModal = false
						this.inputName = ''
						this.phoneUser = ''
					}
				}))
			},

			// #ifdef APP-PLUS
			// 同意协议
			Agree() {
				plus.runtime.agreePrivacy();
				this.showPrivacy = false;
			},
			// #endif

			// #ifdef H5
			//装修模式屏幕截图
			screenShotPreviewImage() {
				let that = this;
				let div = window.window.document.getElementsByClassName('page_box');
				html2canvas(div[0], {
					x: 0,
					y: 0,
					scrollX: 0,
					scrollY: 0,
					backgroundColor: '#f6f6f6',
					foreignObjectRendering: true,
					allowTaint: false,
					taintTest: true,
					scale: 1,
					width: div[0].offsetWidth,
					height: div[0].offsetHeight,
					useCORS: true //保证跨域图片的显示，如果为不添加改属性，或者值为false, 跨域的图片显示灰背景
				}).then(canvas => {
					let screenShotBase64 = canvas.toDataURL();
					that.$api('uploadBase64', {
						content: screenShotBase64
					}).then(res => {
						if (res.code === 1) {
							that.$api('dev.asyncDecorateScreenShot', {
								shop_id: uni.getStorageSync('shop_id'),
								image: res.data.url
							});
							uni.removeStorageSync('screenShot');
							uni.removeStorageSync('shop_id');
						}
					});
				});
			}
			// #endif
		}
	};
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	// 标题搜索栏
	.active {
		// 动画时间跟随轮播组件动画时间
		transition: all linear 1s;
	}
.modal-box {
	background: #fff;
	width: 610rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	.modal-head-img {
		width: 100%;
		height: 213rpx;
	}

	.modal-head-title {
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6d5028;
		line-height: 42rpx;
	}

	.inp {
		width: 501rpx;
		height: 78rpx;
		border: 1rpx solid rgba(168, 112, 13, 1);
		margin: 30rpx auto 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6d5028;

		.pl-inp {
			color: #bd9560;
		}
	}

	.radio {
		width: 500rpx;
		padding: 0 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(200, 150, 61, 1);
		margin-bottom: 20rpx;

		.radio-inp {
			transform: scale(0.7);
			margin-right: 10rpx;
		}
	}

	.post-btn {
		width: 492rpx;
		height: 70rpx;
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
	}
	
	.bgc1 {
		padding: 10rpx 30rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
	}
	
	.bgc2 {
		padding: 10rpx 30rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
	}
}

	.marquee-wrap {
		width: 80%;
		height: 120px;
		border-radius: 20px;
		background-color: red;
		margin: 0 auto;
		overflow: hidden;
		padding: 15px;

		.marquee-list {
			.marquee-item {
				width: 100%;
				height: 100%;
				line-height: 40px;
				font-size: 18px;
				font-weight: 400;
				display: flex;
				align-items: center;
				margin-bottom: 15px;

			}
		}

		.animate-up {
			//   滑动效果更丝滑
			transition: all 0.5s ease-in-out;
			// 每次向Y轴走-40像素
			transform: translateY(-55px);
		}

		.marquee-text {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			list-style: none;
			text-align: center;
		}

		.marquee-img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-right: 15px;
		}

	}









	// 服务协议
	.modal-wrap {
		/deep/ .cu-modal {
			z-index: 99999;
		}
	}

	.vip {
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		
		.img-box {
			// width: 345rpx;
			// height: 345rpx;
			overflow: hidden;
			position: relative;
		
			.img1 {
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
				font-size: 40rpx;
				background-color: rgba(0,0,0,0.4);
				line-height: 290rpx;
				background-size: 100%;
				background-repeat: no-repeat;
			}
		}
		
		
	}

	.prop {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 30rpx;
		text-align: center;
	}

	.padding-prop {
		width: 80%;
		margin: 30rpx auto;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.padding-prop1 {
		width: 80%;
		margin: 20rpx auto;
	}

	.bgc-add {
		color: #FFFFFF;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.service-contract-wrap {
		background-color: #fff;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 610rpx;
		min-height: 850rpx;
		border-radius: 20rpx;

		.service-title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			line-height: 42rpx;
			background: linear-gradient(180deg, rgba(62, 48, 25, 1) 0%, rgba(109, 80, 40, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 30rpx;
		}

		.service-content {
			text-align: left;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 50rpx;
			padding: 0 40rpx;
		}

		.service-tip {
			text-align: left;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(154, 154, 154, 1);
			line-height: 50rpx;
			padding: 0 40rpx;
		}

		.btn-box {
			padding: 40rpx;

			.cancel-btn {
				width: 248rpx;
				height: 70rpx;
				border: 1rpx solid rgba(234, 182, 99, 1);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(234, 182, 99, 1);
				background-color: #fff;
			}

			.agree-btn {
				width: 300rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(233, 181, 97, 1), rgba(238, 204, 138, 1));
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}

		.ic-hide {
			position: absolute;
			font-size: 50rpx;
			bottom: -100rpx;
			z-index: 11;
			color: #fff;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.padding1 {
		width: 100%;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		margin: 10rpx 0;
		justify-content: space-between;

		.bgc {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.header-unm {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
		justify-content: space-between;
	}
	
	.header-unm1 {
		// padding: 10rpx 20rpx;
		background-color: #FFFFFF;
	}

	.head_box {
		width: 750rpx;
		// background: #fff;
		transition: all linear 0.3s;

		/deep/.cuIcon-back {
			display: none;
		}

		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}

	

	.home,
	.list {
		overflow: hidden;
		width: 100%;
		padding-top: 10upx;
	}


	.userlistmsg {
		width: 100%;
		display: flex;
		// align-items: center;
		justify-content: space-around;
		// transition:2s ;
		// animation:moveTop 12s ease infinite alternate;
		view {
			width: 30%;
			height: 35rpx;
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //显示省略号
			white-space: nowrap;
		}
	}

	.cor {
		background: #FFF5F3;
	}
	
	@keyframes moveTop{
	0%{
	transform: translateY(-5rpx);
	}
	3%{
	transform: translateY(-10rpx);
	}
	5%{
	transform: translateY(-20rpx);
	}
	7%{
		transform: translateY(-30rpx);
	}
	10%{
	transform: translateY(-40rpx);
	}
	12%{
	transform: translateY(-50rpx);
	}
	15%{
	transform: translateY(-60rpx);
	}
	17%{
	transform: translateY(-70rpx);
	}
	20%{
	transform: translateY(-80rpx);
	}
	23%{
	transform: translateY(-90rpx);
	}
	25%{
	transform: translateY(-100rpx);
	}
	27%{
	transform: translateY(-110rpx);
	}
	30%{
	transform: translateY(-120rpx);
	}
	33%{
	transform: translateY(-130rpx);
	}
	35%{
	transform: translateY(-140rpx);
	}
	37%{
	transform: translateY(-150rpx);
	}
	40%{
	transform: translateY(-160rpx);
	}
	42%{
	transform: translateY(-170rpx);
	}
	45%{
	transform: translateY(-180rpx);
	}
	47%{
	transform: translateY(-190rpx);
	}
	50%{
	transform: translateY(-200rpx);
	}
	52%{
	transform: translateY(-210rpx);
	}
	55%{
	transform: translateY(-220rpx);
	}
	57%{
	transform: translateY(-230rpx);
	}
	60%{
	transform: translateY(-240rpx);
	}
	62%{
	transform: translateY(-250rpx);
	}
	65%{
	transform: translateY(-260rpx);
	}
	67%{
	transform: translateY(-270rpx);
	}
	70%{
	transform: translateY(-280rpx);
	}
	72%{
	transform: translateY(-290rpx);
	}
	75%{
	transform: translateY(-300rpx);
	}
	77%{
	transform: translateY(-310rpx);
	}
	80%{
	transform: translateY(-320rpx);
	}
	82%{
	transform: translateY(-330rpx);
	}
	85%{
	transform: translateY(-340rpx);
	}
	87%{
	transform: translateY(-350rpx);
	}
	90%{
	transform: translateY(-360rpx);
	}
	92%{
	transform: translateY(-370rpx);
	}
	95%{
	transform: translateY(-380rpx);
	}
	97%{
	transform: translateY(-390rpx);
	}
	100%{
	transform: translateY(0);
	}
	}
</style>
